<template>
    <container type="simple" class="g-width100 g-height100"  aside-style="width:320px;" main-style="padding:0px;">
        <div slot="header">
            <Form
                    inline
                    ref="form"
                    :form-items="formItems"
                    v-on:formChange="(form)=>{selectedAppCode=form.appCode}"
            ></Form>

        </div>
        <div slot="main" class="g-width100 g-height100">
            <MpMenuEdit

                    ref="mpMenuEdit"
                    :buttons="buttons"
                    :app-code="selectedAppCode"
                    :switch-to-origin-wx-mp-menu-json="selfmenu_infoSwitchToOriginWxMpMenuJson"
            ></MpMenuEdit>

        </div>
    </container>
</template>

<script>
    import Container from '../../../../../common-util/src/components/page/Container.vue'
    import Form from '../../../../../common-util/src/components/page/Form.vue'
    import MpMenuEdit from '../../../components/mp/MpMenuEdit.vue'
    export default {
        components:{
            Form,
            MpMenuEdit,
            Container
        },
        name: "MpSelfMenu",
        computed:{

        },
        data(){
            return {
                buttons: null,
                selectedAppCode: null,
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            select:{
                                url: this.$baseURL.wx + '/wx/mp/config/list',
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: this.menuGet,
                                    code: 'wx_mp_menu_get',
                                    label: '获取自定义菜单'
                                },
                                {
                                    action: this.menuDelete,
                                    code: 'wx_mp_menu_delete',
                                    label: '删除自定义菜单'
                                }
                            ]
                        }
                    },
                    {
                        field: {
                            name: 'is_menu_open',
                            value: '未获取'
                        },
                        element:{
                            type: 'txt',
                            label: '当前菜单状态:',
                        }
                    },
                ]
            }
        },
        mounted(){
        },
        methods:{
            getAppCode(){
                return this.$refs.form.getFormData().appCode
            },
            // 获取自定义菜单(高级)
            menuGet(){
                this.$refs.form.validateAndSubmitForm((form)=>{
                    this.$refs.form.setButtonLoading('wx_mp_menu_get',true)
                    this.axios.get(this.$baseURL.wx + '/wx/mp/menu/' + form.appCode + '/getSelfMenuInfoOrigin')
                        .then(res => {
                            this.buttons = res.data.selfmenu_info.button
                            this.$refs.form.setFormItem('is_menu_open',res.data.selfmenu_info.is_menu_open == 1 ? '开启': '未开启/已删除')
                        }).catch(error => {
                        if(error.response){
                            if(error.response.status == 401){
                                return
                            }
                            this.$message.error(error.response.data.msg)
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                    }).finally(()=>{
                        this.$refs.form.setButtonLoading('wx_mp_menu_get',false)
                    })
                })
            },
            menuDelete(){
                let appCode = this.getAppCode()
                if(!appCode){
                    this.$message.error('请选择需要删除的公众号')
                    return
                }
                this.$confirm('会删除默认菜单及全部个性化菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs.form.setButtonLoading('wx_mp_menu_delete',true)
                    this.axios.delete(this.$baseURL.wx + '/wx/mp/menu/' + appCode + '/delete')
                        .then(res=>{
                            this.$message.success('删除成功')
                        }).catch(error=>{
                        if(error.response){
                            if(error.response.status == 401){
                                return
                            }
                            this.$message.error(error.response.data.msg)
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                    })
                        .finally(()=>{
                        this.$refs.form.setButtonLoading('wx_mp_menu_delete',false)
                    })
                })
            },
            // 将自定义菜单的数据结构转为微信公众号原始的可提交的json数据
            selfmenu_infoSwitchToOriginWxMpMenuJson(buttons){
                let originMenu = {
                    button: []
                }
                let generateButtonItem = (buttonsItem)=>{
                    let buttonItem = {}
                    for (let key in buttonsItem){
                        if(buttonsItem[key] !== null){
                            if(key == 'sub_button'){
                                if(buttonsItem[key].list != null){
                                    buttonItem['sub_button'] = []
                                    for (let i = 0; i < buttonsItem[key].list.length; i++) {
                                        buttonItem['sub_button'].push(generateButtonItem(buttonsItem[key].list[i]))
                                    }
                                }
                            }
                            else{
                                buttonItem[key] = buttonsItem[key]
                            }
                        }
                    }
                    return buttonItem
                }
                for (let i = 0; i < buttons.length; i++) {
                    let buttonsItem = buttons[i]
                    originMenu.button.push(generateButtonItem(buttonsItem))
                }
                return originMenu
            }

        }
    }
</script>

<style scoped>

</style>